<script setup>
	import {
		computed,
		ref,
		shallowRef
	} from 'vue';
	import typeItemVue from '../../components/typeItem/typeItem.vue';
	import headSearchVue from '../../components/headSearch/headSearch.vue';
	import {
		getBottomList,
		getCenterList,
		getHeadSwiperList
	} from '../../api';
	import {
		useImageList
	} from '../../store/imgList';
import {onPullDownRefresh} from'@dcloudio/uni-app'
	//pinia 图片列表
	const imageList = useImageList()
	const headSearch = shallowRef(headSearchVue)
	const typeItem = shallowRef(typeItemVue)
	const date = computed(() => { //日期
		return new Date().getDate()
	})

	//头部列表数据 
	const Swiper = ref([])
	getHeadSwiperList(Swiper)

	//中部列表数据  每日推荐
	const CenterList = ref([])
	getCenterList(CenterList)

	//底部列表数据 专题精选
	const BottomList = ref([])
	getBottomList(BottomList)

	//跳转图片预览页面
	const pushPre = (index) => {
		imageList.setList(CenterList.value)
		uni.navigateTo({
			url: `/pages/preImage/preImage?deindex=${index}`,
		})
	}
	onPullDownRefresh(()=>{
	getHeadSwiperList(Swiper)
	getCenterList(CenterList)
	getBottomList(BottomList)
	setTimeout(()=>{
		uni.stopPullDownRefresh()
	},1000)
	})
</script>
<template>
	<view id="app">
	<!-- 头部轮播图和通知栏 -->
	<view class="head">
		<swiper class="swiper" :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="1000">
			<swiper-item v-for="item in Swiper" :key="item._id">
				<image class="image" :src="item.picurl" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<uni-notice-bar class="noticebar" show-icon scrollable text="声明:本软件内所出现的壁纸均来源于网络,仅做学习和个人使用....侵权必删" />
	</view>
	<!-- 中部每日推荐 -->
	<view class="center">
		<view class="center-h">
			<text class="center-h-txt">每日推荐</text>
			<uni-icons color="#22aa62" type="calendar" /><text>{{date}}号</text>
		</view>
		<scroll-view class="center-list" scroll-x="true">
			<view class="center-image">
				<image style="margin: 10rpx; border-radius: 10rpx;" v-for="(item,index) in CenterList" :key="item._id"
					:src="item.smallPicurl" @click="pushPre(index)" mode="heightFix" />
			</view>
		</scroll-view>
	</view>
	<!-- 底部专题精选 -->
	<view class="bottom">
		<view class="bottom-h">
			<text class="bottom-h-txt">专题精选</text>
			<text class="bottom-h-more">More+</text>
		</view>
		<view class="bottom-list">
			<typeItem v-for="(item,index) in BottomList" :key="item._id" :index="index" :info="item" :title="item.name"></typeItem>
		</view>
	</view>

	</view>


	<headSearch title="推荐"></headSearch>


</template>

<style lang="scss" scoped>
	@import url("/app.style.scss");

	.head {
		.swiper {
			width: 100%;
			height: 400rpx;
		}

		.image {
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}

		.noticebar {
			margin: 10rpx 0 10rpx 0;
		}
	}

	.center {
		.center-h {
			color: #22aa62;
			display: flex;
			align-items: center;
			padding: 0 10px 0 5px;

			.center-h-txt {
				margin-right: auto;
				color: black;
				font-size: 20px;
			}
		}

		.center-list {
			min-height: 500rpx;
			white-space: nowrap;

			.center-image {
				display: inline-block;
			}
		}
	}

	.bottom {
		.bottom-h {
			display: flex;
			align-items: center;
			padding: 10rpx;

			.bottom-h-txt {
				font-size: 20px;
				margin-right: auto;
			}

			.bottom-h-more {
				color: gray;
				font-size: 16px;
			}
		}

		.bottom-list {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;

		}
	}
</style>